// 文档加载事件
$(function () {
    /**
     * 需求: 1.一开始就可以实现一个动画的向上滚动（base core）
     * 实现: 
     *  1.找到对应元素-> 火车 .today-recommend > div
     *  2.操作元素的移动  top 发生改变
     *  3.使用动画 animate 表现元素的移动
     function run () {
        let head = $('.today-recommend > div');
        // console.log(head);  
        head.animate({ top:-520 },2000,function() {
            console.log('移动完毕');
        });
    }
     */

    // 需求:2.计算偏移位置
    /**实现:
     *  1. 声明一个计数器，从0开始
     *  2. 计数器+1
     *  3. 移动以前,获取计算器 * 元素的高度 * -1   得到偏移量
     *      3.1: 
     *  4. 移动
     */
    // let sum = 0;
    // function run() {
    //     $('.today-recommend div ul')

    //     //    console.log( currentElement.outerHeight() );  // 不包含外边距
    //     //    console.log( currentElement.outerHeight(true) );  // 包含外边距
    //     // 获取当前元素高度
    //     let currentElement = $('.today-recommend div ul').eq(sum);
    //     let pictureHeight = currentElement.outerHeight()
    //     // 切换索引进入到下一张
    //     sum++;  // 1
    //     // 计算偏移量 = 下一张图的索引 * 元素高度 * -1
    //     let offsetTop = sum * pictureHeight * -1;

    //     // 获取要移动的元素
    //     let head = $('.today-recommend > div');
    //     // console.log(head);  
    //               // { top: -520/-1040   }
    //     head.animate({ top: offsetTop }, 2000, function () {
    //         console.log('移动完毕');
    //         console.log('当前索引是：',sum);
    //     });
    // }



    // 需求4: 当切换到最后一张的时候，瞬间变化成第一张图，然后继续往第二张移动
    /* 思路：
            1. 在轮播图以后之后，来判断是否是最后一张图显示
                1.1: 索引是从0 开始   所有图片的总量 就是  ul.length =>
                1.2核心: 判断 如果当前的 索引3 < 4 是最后一张 
                1.3代码: 判断            sum === ul.length - 1
            2. 操作css(让用户不知情) 将top 属性改变为0 ，索引也变成0 
    */
    let sum = 0;

    function run() {
        let $uls = $('.today-recommend div ul');

        // 获取当前元素高度
        let currentElement = $uls.eq(sum);
        let pictureHeight = currentElement.outerHeight()
        // 切换索引进入到下一张
        sum++;  // 1
        // 计算偏移量 = 下一张图的索引 * 元素高度 * -1
        let offsetTop = sum * pictureHeight * -1; 

        // 获取要移动的元素
        let head = $('.today-recommend > div');
        // console.log(head);  
                  // { top: -520/-1040   }
        head.stop(true).animate({ top: offsetTop }, 2000, function () {
            // console.log('移动完毕');
            // console.log('当前索引是：',sum);
            // 判断是否到头
            if (sum === $uls.length - 1) {
                console.log('瞬间切换了内容到初始第一张',sum);
                // 操作css(让用户不知情) 将top 属性改变为0 ，索引也变成0 
                head.css('top',0);
                sum = 0;
            }
        });
    }


    // 需求3:点击按钮 调用run函数
    // $('.changeGoods').click(function () {
    //     console.log('dian')
    //     run();
    // });
    // run();

    let sum2 = 0;
    let $uls = $('#single_provider div ul');
    // 需求5: 独家提供 的自动轮播
    function run2() {
        
        // 获取当前元素高度
        let currentElement = $uls.eq(sum2);
        let pictureHeight = currentElement.outerHeight()
        // 切换索引进入到下一张
        sum2++;  // 1
        // 计算偏移量 = 下一张图的索引 * 元素高度 * -1
        let offsetTop = sum2 * pictureHeight * -1; 

        // 获取要移动的元素
        let head = $('#single_provider > div');
        // console.log(head);  
                  // { top: -520/-1040   }
        head.stop(true).animate({ top: offsetTop }, 2000, function () {
            console.log('移动完毕');
            // console.log('当前索引是：',sum2);
            // 判断是否到头
            if (sum2 === $uls.length - 1) {
                console.log('瞬间切换了内容到初始第一张',sum2);
                // 操作css(让用户不知情) 将top 属性改变为0 ，索引也变成0 
                head.css('top',0);
                sum2 = 0;
            }
        });
    }
    // 一开始的定时器
    let timer = setInterval(function() {
        run2();
    },3000);

    // 鼠标悬浮切换定时器   
    $('#single_provider').hover(function () {
        // 停止定时器
        clearInterval(timer);
    },function () {
        // 继续定时器
        timer =  setInterval(function() {
            run2();
        },3000);
    })


    // 需求6： 给左右按钮绑定点击事件
   /**
    * 1. 给左右按钮绑定鼠标移入、移出事件
   * 对于定时器进行处理
     * 移入：清除定时器
     * 移出：设置定时器
    2. 给按钮绑定点击事件
    * 左边按钮
        * 将当前的索引-2
        * 调用run2函数的执行（run2函数内部包含索引加一）
    * 右边按钮
        * 调用run2函数的执行（run2函数内部包含索引加一）
    */
    $('.left-btn').click(function () {
        // 获取当前的索引  并减1
        //if (sum2 === 0) 
         //   sum2 = $uls.length - 3;
        //else 
            sum2 = sum2 - 2;   // 2 -> 0 -> 1
        // 直接启动
        run2();
    })
    .mouseenter(function () {
        clearInterval(timer);
    })
    .mouseleave(function () {
        // 继续定时器
        timer =  setInterval(function() {
            run2();
        },3000);
    });
    $('.right-btn').click(function () {
        // 获取当前的索引  并减1
        // sum2++; // 由于前进，函数内部本身附带了下一张，所以不用增加
        // 直接启动
            run2();
    })
    .mouseenter(function () {
        clearInterval(timer);
    })
    .mouseleave(function () {
        // 继续定时器
        timer =  setInterval(function() {
            run2();
        },3000);
    })

     



});